<template>
    <div class="WorkshopTypeManage">
      <div class="crumbs">
          <el-breadcrumb separator="/">
              <el-breadcrumb-item><i class="el-icon-tickets"></i> 体验课管理</el-breadcrumb-item>
          </el-breadcrumb>
      </div>
      
      <div class="container">
        <div class="handle-box">
          <el-button type="primary" @click.stop.prevent="operateAppendType">新增体验课</el-button>
        </div>
        <el-table :data="workshopList" ref="multipleTable">
          <el-table-column type="index" width="40"></el-table-column>
            <!-- sortable -->
            <el-table-column label="体验课名称" align="center">
              <template slot-scope="scope" >  
                  {{scope.row.gratis_name}}
              </template>
            </el-table-column>
            <!-- <el-table-column label="总计天数" align="center">
              <template slot-scope="scope" >  
                {{scope.row.total_day}} 天
              </template>
            </el-table-column> -->
            <el-table-column label="操作" align="center">
                <template slot-scope="scope" >
                    <el-button size="small" type="primary" @click.stop.prevent="operateCompileType(scope.row)">编辑体验课</el-button>
                    <el-button size="small" type="success" @click.stop.prevent="opoperateSkipInterface(scope.row.gratis_id)">查看编辑</el-button>
                    <!-- <el-button size="small" type="danger" @click.stop.prevent="operateDeleteType(scope.$index, scope.row)">删除类型</el-button> -->
                    <el-button size="small" type="danger" @click.stop.prevent="operateDeleteType(scope.row)">删除体验课</el-button>
                    <!-- <el-button size="small" type="warning" @click.stop.prevent="operateRecommendType(scope.row, 1)" v-if="scope.row.type_recommend === 2">推荐类型</el-button> -->
                    <!-- <el-button size="small" type="info" @click.stop.prevent="operateRecommendType(scope.row, 2)" v-if="scope.row.type_recommend === 1">取消推荐</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next, jumper" :total="workshopTotal">
            </el-pagination>
        </div>
      </div>


      <!-- 编辑弹出框 -->
      <el-dialog :title="editDialogTitle" :visible.sync="editVisible" width="60%">
        <el-form ref="workshopFrom" :model="workshopFrom" :rules="workshopRules" label-width="20%">
          <el-form-item label="体验课名称" prop="gratisName">
            <el-input v-model="workshopFrom.gratisName" placeholder="请输入体验课名称"></el-input>
          </el-form-item>
          <el-form-item label="优惠券">
            <el-select v-model="workshopFrom.gratisCoupon" placeholder="请选择优惠券" style="float: left;" class="optionType">
              <el-option :label="cption.cakeName" :value="cption.cakeId" v-for="(cption, cIndex) in couponList" :key="cIndex"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="总计天数" prop="typeDay">
              <el-input v-model.number="courseTypeFrom.typeDay" placeholder="请输入总计天数"></el-input>
          </el-form-item>
          <el-form-item label="课程金额" prop="typeFigure">
              <el-input v-model.number="courseTypeFrom.typeFigure" placeholder="请输入课程金额"></el-input>
          </el-form-item> -->
          <!-- <el-form-item label="课程banner上传" prop="typeBanner">
            <div style="visibility: hidden;"><el-input v-model="courseTypeFrom.typeBanner"></el-input></div>
            <div class="crop-demo">
              <img :src="courseTypeFrom.typeBanner" class="pre-img" v-if="courseTypeFrom.typeBanner">
              <div class="crop-demo-btn">选择图片
                  <input class="crop-input" type="file" name="image" ref="imageBanner" accept="image/*" @change="uploadCourseTypeImg($event, 0)"/>
              </div>
            </div>
          </el-form-item> -->
          <!-- <el-form-item label="证书上传" prop="typeCertificate">
            <div style="visibility: hidden;"><el-input v-model="courseTypeFrom.typeCertificate"></el-input></div>
            <div class="crop-demo">
              <img :src="courseTypeFrom.typeCertificate" class="pre-img" v-if="courseTypeFrom.typeCertificate">
              <div class="crop-demo-btn">选择图片
                  <input class="crop-input" type="file" name="image" ref="imageCertificate" accept="image/*" @change="uploadCourseTypeImg($event, 1)"/>
              </div>
            </div>
          </el-form-item> -->
          <!-- <el-form-item label="课程介绍图片上传" prop="typeReferral">
            <div style="visibility: hidden;"><el-input v-model="courseTypeFrom.typeReferral"></el-input></div>
            <div class="crop-demo">
              <img :src="courseTypeFrom.typeReferral" class="pre-img" v-if="courseTypeFrom.typeReferral">
              <div class="crop-demo-btn">选择图片
                  <input class="crop-input" type="file" name="image" ref="imageReferral" accept="image/*" @change="uploadCourseTypeImg($event, 2)"/>
              </div>
            </div>
          </el-form-item> -->
          <!-- <el-form-item label="小课堂图片上传" prop="typeLesson">
            <div style="visibility: hidden;"><el-input v-model="courseTypeFrom.typeLesson"></el-input></div>
            <div class="crop-demo">
              <img :src="courseTypeFrom.typeLesson" class="pre-img" v-if="courseTypeFrom.typeLesson">
              <div class="crop-demo-btn">选择图片
                  <input class="crop-input" type="file" name="image" ref="imageLesson" accept="image/*" @change="uploadCourseTypeImg($event, 3)"/>
              </div>
            </div>
          </el-form-item> -->
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="editVisible = false">取 消</el-button>
            <el-button type="primary" @click.stop.prevent="operateForm('workshopFrom')">保存发布</el-button>
        </span>
      </el-dialog>


      <!-- 删除提示框 -->
      <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
        <div class="del-dialog-cnt">
          删除不可恢复，请输入登录密码确定删除
          <el-form ref="workshopFrom" :model="workshopFrom" :rules="workshopRules">
            <el-form-item label="" prop="userPassword">
              <el-input v-model="workshopFrom.userPassword" placeholder="请输入用户密码"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="delVisible = false">取 消</el-button>
            <el-button type="primary" @click.stop.prevent="operateForm('workshopFrom')">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 推荐提示框 -->
      <!-- <el-dialog title="提示" :visible.sync="recVisible" width="300px" center>
        <div class="del-dialog-cnt">
          注意: 只可以推荐一个类型， 已推荐的均会取消推荐
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="recVisible = false">取 消</el-button>
            <el-button type="primary" @click.stop.prevent="nominateCourseType(1)">确 定</el-button>
        </span>
      </el-dialog> -->

    </div>
</template>

<script type="text/ecmascript-6">
  import {baiduCloud} from '@/config/env';
  // import {obtainCourseTypeList, appendCourseType, compileCourseType, recommendCourseType, deleteCourseType} from '@/config/api'
  import { obtainWorkshopData, obtainDiscountCouponData, accretionWorkshop, compileWorkshop, removeWorkshop } from '@/config/api'
  export default {
    name: 'workshopManage',
    data () {
      return {
        // // 
        // akBos: baiduCloud.akBos,
        // skBos: baiduCloud.skBos,
        // endpointBos: baiduCloud.endpointBos,

        // // 0 --- 课程类型banner  
        // bucketTypeBannerBos: baiduCloud.bucketBos +'/course/type/banner',
        // urlTypeBannerBos: baiduCloud.urlBos+'/course/type/banner/',

        // // 1 --- 课程类型证书
        // bucketTypeCertificateBos: baiduCloud.bucketBos +'/course/type/certificate',
        // urlTypeCertificateBos: baiduCloud.urlBos+'/course/type/certificate/',

        // // 2 --- 课程类型介绍 
        // bucketTypeReferralBos: baiduCloud.bucketBos +'/course/type/referral',
        // urlTypeReferralBos: baiduCloud.urlBos+'/course/type/referral/',

        // // 3 --- 课程小课程
        // bucketTypeLessonBos: baiduCloud.bucketBos +'/course/type/lesson',
        // urlTypeLessonBos: baiduCloud.urlBos+'/course/type/lesson/', 

        // 存储体验课数据
        workshopList: [],
        // 体验课总条数
        workshopTotal: 0,
        // 体验课页面
        workshopPage: 0,

        // 存储优惠券数据
        couponList: [],

        // 体验课表单
        workshopFrom: {
          gratisId: '',
          gratisName: '',
          gratisCoupon: '',
          // typeDay: null,
          // typeFigure: null,
          // typeBanner: '',
          // typeCertificate: '',
          // typeReferral: '',
          // typeLesson: '',
          userPassword: '',
        },
        workshopRules: {
          gratisName: [
              { required: true, message: '请输入体验课名称', trigger: 'blur' },
          ],
          // typeDay: [
          //     { required: true, message: '请填写总天数', trigger: 'blur' },
          //     { type: 'number', message: '总天数必须为数字'}
          // ],
          // typeFigure: [
          //     { required: true, message: '请填写课程金额', trigger: 'blur' },
          //     { type: 'number', message: '课程金额必须为数字'}
          // ],
          // typeBanner: [
          //     { required: true, message: '请上传类型banner', trigger: 'blur' }
          // ],
          // typeCertificate: [
          //     { required: true, message: '请上传类型证书', trigger: 'blur' }
          // ],
          // typeReferral: [
          //     { required: true, message: '请上传类型介绍', trigger: 'blur' }
          // ],
          // typeLesson: [
          //     { required: true, message: '请上传类型小课堂', trigger: 'blur' }
          // ],
          userPassword: [
              { required: true, message: '请输入用户密码', trigger: 'blur' },
          ],
        },

        // 显示编辑弹窗
        editVisible: false,
        // 编辑弹窗标题
        editDialogTitle: '',
        // 编辑弹窗类型  0 -- 新增  1 -- 编辑  2 -- 删除
        editStatus: 0,
        // 显示删除弹窗
        delVisible: false,
        // 显示推荐弹窗
        recVisible: false,

        // // 课程类型图片状态    0 --- 课程类型banner  1 --- 课程类型证书  2 --- 课程类型介绍  3 --- 课程小课堂
        // courseTypeStatus: 0
      }
    },
    mounted (){
      let self = this;
      // // 初始化百度云上传
      // self.initBaiDuBce();
      // 获取体验课数据
      self.obtainWorkshopData();
    },
    methods: {
      // 分页导航
      handleCurrentChange(val) {
        let self = this;
        // 体验课页面
        self.workshopPage = val - 1;
        // 获取体验课数据
        self.obtainWorkshopData();
        console.log(val, '分页导航')
      },

      // 操作 添加类型
      operateAppendType(){
        let self = this;
        // 初始化表单
        self.initFrom();
        // 获取优惠券数据
        self.gainDiscountCoupon();
        // 编辑弹窗类型  0 -- 新增  1 -- 编辑  2 -- 删除
        self.editStatus = 0;
        // 编辑弹窗标题
        self.editDialogTitle = '新增体验课';
        // 显示编辑弹窗
        self.editVisible = true;
      },
      // 操作 编辑类型
      operateCompileType(item){
        let self = this;
        // 编辑弹窗类型  0 -- 新增  1 -- 编辑  2 -- 删除
        self.editStatus = 1;
        // 编辑弹窗标题
        self.editDialogTitle = '编辑体验课';
        // 初始化表单
        self.initFrom();
        // 获取优惠券数据
        self.gainDiscountCoupon();
        // self.$nextTick(() => {
        // 体验课表单
        self.workshopFrom.gratisId = item.gratis_id;
        self.workshopFrom.gratisName = item.gratis_name;
        self.workshopFrom.gratisCoupon = item.gratis_coupon;
        // self.courseTypeFrom.typeDay = item.total_day;
        // self.courseTypeFrom.typeFigure = (item.type_price-0)/100;
        // self.courseTypeFrom.typeBanner = item.type_banner;
        // self.courseTypeFrom.typeCertificate = item.certificate;
        // self.courseTypeFrom.typeReferral = item.type_referral;
        // self.courseTypeFrom.typeLesson = item.type_lesson;
        // })
        // 显示编辑弹窗
        self.editVisible = true;
      },
      // 操作 跳转界面
      opoperateSkipInterface(gratisId){
        let self = this;
        console.log(gratisId, '...gratisId')
        self.$router.push({path: '/workshopContentManage', query: {gratisId: gratisId}})
      },
      // 操作 删除类型
      operateDeleteType(item){
        let self = this;
        // 编辑弹窗类型  0 -- 新增  1 -- 编辑  2 -- 删除
        self.editStatus = 2;
        // 初始化表单
        self.initFrom()
        // 体验课表单
        self.workshopFrom.gratisId = item.gratis_id;
        // 显示删除弹窗
        self.delVisible = true;
      },
      // // 操作 推荐类型
      // operateRecommendType(item, status){
      //   let self = this;
      //   console.log(item, status, '操作 推荐类型')
      //   // 初始化表单
      //   self.initFrom()
      //   // 课程类型表单
      //   self.courseTypeFrom.typeId = item.type_id;
      //   // 1 推荐类型  2 取消推荐
      //   if (status === 1) {
      //     // 显示推荐弹窗
      //     self.recVisible = true
      //   }
      //   if (status === 2) {
      //     // 推荐课程类型
      //     self.nominateCourseType(status)
      //   }
      // }, 
      // // 推荐课程类型
      // async nominateCourseType(status) {
      //   let self = this;
      //   await recommendCourseType(self.courseTypeFrom.typeId, (status-0))
      //     .then(res => {
      //       console.log(res, '... 编辑 res')
      //       if(res.status === 200){
      //         // 获取课程分类数据
      //         self.obtainCourseTypeData();
      //         // 显示推荐弹窗
      //         self.recVisible = false;
      //       }else{
      //         self.$notify.error({
      //           title: '错误',
      //           message: res.msg
      //         });
      //       }
      //   }).catch(res => {
      //       console.log(res, '... 编辑 err')
      //   });

      // },

      // // 初始化百度云上传
      // initBaiDuBce(){
      //   let self = this;
      //   let bosConfig = {
      //     credentials: {
      //         ak: self.akBos,
      //         sk: self.skBos
      //     },
      //     endpoint: self.endpointBos  // 根据您选用bos服务的区域配置相应的endpoint
      //   };
      //   self.client = new baidubce.sdk.BosClient(bosConfig);
      // },
      // // 上传图片
      // uploadCourseTypeImg(event, status){
      //   let self = this;
      //   // 课程类型图片状态    0 --- 课程类型banner  1 --- 课程类型证书  2 --- 课程类型介绍  3 --- 课程小课堂
      //   self.courseTypeStatus = status;

      //   // 浏览器兼容 (FF不兼容event.srcElement)
    	//   let evt = event.srcElement ? event.srcElement : event.target;
      //   let file = evt.files[0]; // 获取要上传的文件
      //   // 用户取消上传
      //   if(file == undefined){
      //     return;
      //   }
      //   // 生成6位随机数
      //   let chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
      //   let res = "";
      //   for(let i = 0; i < 6 ; i ++) {
      //       let id = Math.ceil(Math.random()*61);
      //       res += chars[id];
      //   }
      //   let key = res + '.' +file.name.split(/\./g).pop(); // 保存到bos时的key，您可更改，默认以文件名作为key
      //   let blob = file;
      //   let ext = key.split(/\./g).pop();
      //   // let mimeType = baidubce.sdk.MimeType.guess(ext);
      //   console.log(ext, '...ext...')
      //   let mimeType = baidubce.sdk.MimeType.guess(ext);
      //   console.log(mimeType, '...mimeType...1')
      //   if (/^text\//.test(mimeType)) {
      //       mimeType += '; charset=UTF-8';
      //   }
      //   console.log(mimeType, '...mimeType...2')
      //   let options = {
      //     'Content-Type': mimeType
      //   };

      //   // 课程类型图片状态    0 --- 课程类型banner  1 --- 课程类型证书  2 --- 课程类型介绍  3 --- 课程小课堂
      //   let bucketBos = '';
      //   let urlBos = '';
      //   if(self.courseTypeStatus === 0){
      //     bucketBos = self.bucketTypeBannerBos;
      //     urlBos = self.urlTypeBannerBos;
      //   }
      //   if(self.courseTypeStatus === 1){
      //     bucketBos = self.bucketTypeCertificateBos;
      //     urlBos = self.urlTypeCertificateBos;
      //   }
      //   if(self.courseTypeStatus === 2){
      //     bucketBos = self.bucketTypeReferralBos;
      //     urlBos = self.urlTypeReferralBos;
      //   }
      //   if(self.courseTypeStatus === 3){
      //     bucketBos = self.bucketTypeLessonBos;
      //     urlBos = self.urlTypeLessonBos;
      //   }
        
      //   self.client.putObjectFromBlob(bucketBos, key, blob, options)
      //     .then(function (res) {
      //       // 上传完成，添加您的代码
      //       console.log(key,res,'上传成功');
      //       // 清空input file的值 （避免  点file控件选中同一个文件后发现图片并没有被重新创建）
      //       self.$refs.imageBanner.value = ''
      //       self.$refs.imageCertificate.value = ''
      //       self.$refs.imageReferral.value = ''
      //       self.$refs.imageLesson.value = ''
            
      //       // 课程类型图片状态    0 --- 课程类型banner  1 --- 课程类型证书  2 --- 课程类型介绍  3 --- 课程小课堂
      //       if(self.courseTypeStatus === 0){

      //         // 课程类型banner
      //         self.courseTypeFrom.typeBanner = urlBos + key;
      //         console.log(self.courseTypeFrom.typeBanner, "课程类型banner")
      //       }
      //       if(self.courseTypeStatus === 1){
      //         // 课程类型证书
      //         self.courseTypeFrom.typeCertificate = urlBos + key;
      //       }
      //       if(self.courseTypeStatus === 2){
      //         // 课程类型介绍
      //         self.courseTypeFrom.typeReferral = urlBos + key;
      //       }
      //       if(self.courseTypeStatus === 3){
      //         // 课程小课堂
      //         self.courseTypeFrom.typeLesson = urlBos + key;
      //       }
      //     })
      //     .catch(function (err) {
      //         // 上传失败，添加您的代码
      //         console.log(err);
      //   });
      // },

      // 获取体验课数据
      async obtainWorkshopData(){
        let self = this;
        let workshopData = await obtainWorkshopData(self.workshopPage);
        if(JSON.stringify(workshopData) != '{}'){
          // 存储体验课数据
          self.workshopList = workshopData.list;
          // 体验课总条数
          self.workshopTotal = workshopData.total;
        }
        console.log(workshopData, '....获取课程分类数据')
      },

      // 获取优惠券数据
      async gainDiscountCoupon(){
        let self = this;
        let couponData = await obtainDiscountCouponData();
        console.log(couponData, '....获取获取优惠券数据')
        if (couponData.status === 200) {
          // 存储优惠券数据
          self.couponList = couponData.list
        }
      },

      // 初始化表单
      initFrom(){
        let self = this;
        // 体验课表单
        self.workshopFrom.gratisId = '';
        self.workshopFrom.gratisName = '';
        self.workshopFrom.gratisCoupon = '';
        // self.courseTypeFrom.typeDay = null;
        // self.courseTypeFrom.typeFigure = null;
        // self.courseTypeFrom.typeBanner = '';
        // self.courseTypeFrom.typeCertificate = '';
        // self.courseTypeFrom.typeReferral = '';
        // self.courseTypeFrom.typeLesson = '';
        self.workshopFrom.userPassword = '';
      },

      // 保存分布
      async operateForm(formName){
        let self = this;
        console.log(self.workshopFrom, '...self.workshopFrom')
        self.$refs[formName].validate( async(valid) => {
          if (valid) {
            // 编辑弹窗类型  0 -- 新增  1 -- 编辑  2 -- 删除
            if(self.editStatus === 0){
              // appendCourseType(self.courseTypeFrom.typeName, self.courseTypeFrom.typeDay, (self.courseTypeFrom.typeFigure-0)*100, self.courseTypeFrom.typeBanner, self.courseTypeFrom.typeCertificate, self.courseTypeFrom.typeReferral, self.courseTypeFrom.typeLesson)
              //   .then(res => {
              //     console.log(res, '... 新增 res')
              //     if(res.status === 200){
              //       // 获取体验课数据
              //       self.obtainWorkshopData();
              //       // 显示编辑弹窗
              //       self.editVisible = false;
              //     }else{
              //       self.$notify.error({
              //         title: '错误',
              //         message: res.msg
              //       });
              //     }
                    
              // }).catch(res => {
              //     console.log(res, '... 新增 err')
              // });


              const insertInfo = await accretionWorkshop(self.workshopFrom.gratisName, self.workshopFrom.gratisCoupon)
              console.log(insertInfo, '.....insertInfo')
              if (insertInfo.status === 200) {
                // 获取体验课数据
                self.obtainWorkshopData();
                // 显示编辑弹窗
                self.editVisible = false;
              } else {
                self.$notify.error({
                  title: '错误',
                  message: insertInfo.msg
                });
              }


            }
            if(self.editStatus === 1){
              // compileCourseType(self.courseTypeFrom.typeId, self.courseTypeFrom.typeName, self.courseTypeFrom.typeDay, (self.courseTypeFrom.typeFigure-0)*100, self.courseTypeFrom.typeBanner, self.courseTypeFrom.typeCertificate, self.courseTypeFrom.typeReferral, self.courseTypeFrom.typeLesson)
              //   .then(res => {
              //     console.log(res, '... 编辑 res')
              //     if(res.status === 200){
              //       // 获取体验课数据
              //       self.obtainWorkshopData();
              //       // 显示编辑弹窗
              //       self.editVisible = false;
              //     }else{
              //       self.$notify.error({
              //         title: '错误',
              //         message: res.msg
              //       });
              //     }
              // }).catch(res => {
              //     console.log(res, '... 编辑 err')
              // });

              const updateInfo = await compileWorkshop(self.workshopFrom.gratisId, self.workshopFrom.gratisName, self.workshopFrom.gratisCoupon)
              console.log(updateInfo, '.....updateInfo')
              if (updateInfo.status === 200) {
                // 获取体验课数据
                self.obtainWorkshopData();
                // 显示编辑弹窗
                self.editVisible = false;
              } else {
                self.$notify.error({
                  title: '错误',
                  message: updateInfo.msg
                });
              }
            }
            if(self.editStatus === 2){
              // deleteCourseType(self.courseTypeFrom.typeId, self.courseTypeFrom.userPassword)
              //   .then(res => {
              //     console.log(res, '... 删除 res')
              //     if(res.status === 200){
              //       self.workshopPage = 0;
              //       // 获取体验课数据
              //       self.obtainWorkshopData();
              //       // 显示删除弹窗
              //       self.delVisible = false;
              //     }else{
              //       self.$notify.error({
              //         title: '错误',
              //         message: res.msg
              //       });
              //     }
                  
              // }).catch(res => {
              //     console.log(res, '... 删除 err')
              // });


              const deleteInfo = await removeWorkshop(self.workshopFrom.gratisId, self.workshopFrom.userPassword)
              if (deleteInfo.status === 200) {
                self.workshopPage = 0;
                // 获取体验课数据
                self.obtainWorkshopData();
                // 显示删除弹窗
                self.delVisible = false;
              } else {
                self.$notify.error({
                  title: '错误',
                  message: deleteInfo.msg
                });
              }
            }
          } else {
            console.log('表单提交失败!!');
            return false;
          }
        });
        
      },
    },
  }
</script>
<style lang="less">
  .WorkshopTypeManage{
    .el-input__inner{
      width: 30%;
    }
    .optionType{
      .el-input__inner{
        width: 100%;
      }
    }
    .del-dialog-cnt{
      .el-input__inner{
        width: 100%;
      }
    } 
  }
</style>
<style lang="less" scoped>
  @import 'WorkshopTypeManage.less';
</style>
